/**
 * 账户管理
 * Created by suweiming on 2017/12/30.
 */
import React from 'react';
import {SafeAreaView} from 'react-navigation';
import {
    Container,
    Header,
    Button,
    Body,
    Left,
    DataTips,
    validateForm,
    getMergeFormData,
    fnFail,
    fnSuccess, Title,
    Content,
    StyleSheet, Icon,
    Text, Image, View, Right,
    Fom, Loading, ImagePicker
} from '../../lib/components';


// More info on all the options is below in the README...just some common use cases shown here
var options = {
    title: '选择头像',
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照',
    chooseFromLibraryButtonTitle: '从相册中选择',
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};


/**
 * 驾驶司机
 */
export default class User extends React.Component {

    constructor(props) {
        super(props);
        this.state = {data: [], loading: true,};
    }

    componentDidMount() {
    }

    render() {
        const self = this;
        return <Container>
            <Header
                hasTabs
                style={{
                    backgroundColor: '#673ab7',
                }}
            >
                <Left>
                    <Button
                        transparent
                        onPress={() => {
                            self.props.navigation.goBack();
                        }}
                    >
                        <Icon
                            size={24}
                            style={{color: '#FFF'}}
                            name="ios-arrow-back"
                        />
                    </Button>
                </Left>
                <Body>
                <Title style={{color: '#FFF'}}>账户管理</Title>
                </Body>
                <Right>
                    {/*<Button*/}
                    {/*transparent*/}
                    {/*>*/}
                    {/*<Icon*/}
                    {/*size={24}*/}
                    {/*style={{color: '#FFF'}}*/}
                    {/*name="ios-heart-outline"/>*/}
                    {/*</Button>*/}
                </Right>
            </Header>
            <View
                style={{
                    alignItems: 'center', paddingLeft: 5, paddingRight: 5,
                    backgroundColor: '#FFF', flexDirection: 'row'
                }}
            >
                <Text style={{color: '#777', flex: 1}}>修改个人头像</Text>
                <Button
                    style={{borderRadius: 0, marginTop: 10, marginBottom: 10}}
                    transparent
                    onPress={() => {
                        /**
                         * The first arg is the options object for customization (it can also be null or omitted for default options),
                         * The second arg is the callback which sends object: response (more info below in README)
                         */
                        console.log(ImagePicker);
                        ImagePicker.showImagePicker(options, (response) => {
                            console.log('Response = ', response);

                            if (response.didCancel) {
                                console.log('User cancelled image picker');
                            }
                            else if (response.error) {
                                console.log('ImagePicker Error: ', response.error);
                            }
                            else if (response.customButton) {
                                console.log('User tapped custom button: ', response.customButton);
                            }
                            else {
                                let source = {uri: response.uri};
                                self.setState({
                                    avatarSource: source
                                });
                            }
                        });
                    }}
                >
                    <Image
                        source={require('../../assets/NavLogo.png')}
                        style={styles.image}

                    />
                </Button>
            </View>

        </Container>
    }
};
const styles = StyleSheet.create({
    bannerContainer: {
        backgroundColor: '#673ab7',
        paddingTop: 20,
    },
    banner: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 16,
    },
    image: {
        width: 50,
        height: 50,
        resizeMode: 'contain',
        tintColor: '#fff',
        margin: 8,
    },
    title: {
        fontSize: 18,
        fontWeight: '200',
        color: '#fff',
        margin: 8,
    },
});
